<!DOCTYPE html>
<html lang="zn">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入Vue -->
  <script src="../js/vue.js"></script>
  <title>key的原理</title>
</head>

<body>
<!-- 
  面试题: react\vue中的key有什么作用?(key的内部原理)

    1.虚拟dom中的key的作用:
      key是虚拟dom对象的标识,当数据发生变化时,Vue会根据[新数据]生成[新的虚拟dom],随后Vue进行[新虚拟dom]与[旧虚拟dom]的差异比较,比较规则如下:
    
    2.对比规则:
      (1)旧虚拟dom中找到了新虚拟dom相同的key
        若虚拟dom中内容没变,直接使用之前的真实dom
        若虚拟dom中内容变了,则生成新的真实dom,随后替换掉页面中之前的真实dom

      (2)旧虚拟dom中未找到了新虚拟dom相同的key
        创建新的真实dom,随后渲染到页面
    
    3.用index作为key可能会引发的问题:
      1.若对数据进行:逆序添加\逆序删除等破坏顺序操作会产生没有必要的真实dom更新 ==>界面效果没问题,但效率低
      2.如果结构中还包含输入类的dom:会产生错误dom更新 ==> 界面有问题

    4.开发中如何选择key?:
      1.最好使用每条数据的唯一标识作为key,比如id,手机号,身份证号,学号唯一标识
      2.如果不存在对数据的逆序添加,逆序删除等破坏顺序操作,仅用于渲染列表展示,使用index作为key是没有问题的
 -->

 <!-- 
  数组的方法:
    1.join
      该方法可以将数组里的元素,通过指定的分隔符,以字符串的形式连接起来。
      返回值:返回一个新的字符串
      //将数组用 - 符号连接起来
        let arr = [1,2,3,4,5];
        let str = arr.join('-');
        console.log(str)//str = 1-2-3-4-5;

    2.split
      该方法是用过指定的分隔符,将字符串分割成数组。
      返回值:返回一个新的数组
      let str = wqz-ttj；
      let arr = str.split('-');
      console.log(arr);// arr=['wqz','ttj'];
    
  数组的增删操作(直接改变原数组)
    1.push
      该方法可以在数组的最后面,添加一个或者多个元素
      结构: arr.push(值)
      返回值:返回的是添加元素后数组的长度.

    2.pop
      该方法可以在数组的最后面,删除一个元素
      结构: arr.pop()
      返回值:返回的是刚才删除的元素.

    3.unshift
      该方法可以在数组的最前面,添加一个或者几个元素
      结构: arr.unshift(值)
      返回值: 返回的是添加元素后数组的长度

    4.shift
      该方法可以在数组的最前面,删除一个元素
      结构: arr.shift()
      返回值: 返回的是刚才删除的元素.

  数组的翻转和排序(改变数组)
    1.reverse 翻转数组
    结构:arr.reverse()

    2.sort
    该方法可以对数组进行排序.
    let arr = [1,3,5,2,4,23,122,34];
    //没有参数:时按照首字符的先后排序
    arr.sort()//arr=[1,122,2,23,3,34,4,5];
    //有参数
    arr.sort(function(a,b){
      return a-b;//从小到大排序
      return b-a;//从大到小排序
    })




  -->
  <div id="root">
    <!-- 遍历数组 -->
    <h2>人员列表(遍历数组)</h2>
    <!-- once事件装饰符只执行一次 -->
    <button @click.once="add">添加一个老刘</button>
    <!-- <ul>
      <li v-for="person in personList" :key="index">
        {{person.name}}-{{person.age}}
        <input type="text">
      </li>
    </ul> -->
    <ul>
      <li v-for="person in personList" :key="person.id">
        {{person.name}}-{{person.age}}
        <input type="text">
      </li>
    </ul>
  </div>

  <script>
    Vue.config.productionTip = false

    const vm = new Vue({
      el: '#root',
      data() {
        return {
          personList: [
            {
              id: '001',
              name: '张三',
              age: 25
            },
            {
              id: '002',
              name: '李四',
              age: 26
            },
            {
              id: '003',
              name: '王五',
              age: 27
            },
          ]
        }
      },
      methods: {
        add: function () {
          const p = [
            {
              id: '004',
              name: '老刘',
              age: 40
            },
            {
              id:'005',
              name:'老伍',
              age:50
            }
          ]
          // 在前面添加
          this.personList.unshift(p[0])
          // 在后面添加
          this.personList.push(p[1])
        }
      },
    })
  </script>
</body>

</html>